<template>
    <div id="add-blog">
        <h2>发布文章</h2>
        <form v-if="!submmited">
            <label>文章标题</label>
            <input type="text" v-model="blog.title">
            <label>文章内容</label>
            <textarea v-model="blog.content"></textarea>

<!--            <div id="checkboxs">
                <label>vue.js</label>
                <input type="checkbox" value="vue.js" v-model="blog.categorie">
                <label>react.js</label>
                <input type="checkbox" value="react.js" v-model="blog.categorie">
                <label>node.js</label>
                <input type="checkbox" value="node.js" v-model="blog.categorie">
            </div> -->

            <label>作者：</label>
            <select v-model="blog.author">
                <option v-for="(author, index) in author" :key="index">{{ author }}</option>
            </select>

            <button v-on:click.prevent="post">发布文章</button>
        </form>

        <div id="peiview">
            <h3>文章总览</h3>
            <p>文章标题：{{ blog.title }}</p>
            <p>文章内容</p>
            <p>{{ blog.content }}</p>

            <ul>
                <li v-for="(categorie, index) in blog.categorie" :key="index">{{ categorie }}</li>
            </ul>
            <p>作者：{{ blog.author }}</p>
        </div>
    </div>
</template>

<script>
import axios from "axios"
export default {
    name: 'add-blog',
    data() {
        return {
            blog: {
                title: '',
                content: '',
                categorie: [],
                author: '',
            },
            author: ['henry', 'lucy', 'Eric'],
            submmited: false
        }
    },
    methods: {
        post: function () {
            axios.post("http://jsonplaceholder.typicode.com/posts", { 'title': this.blog.title, 'body': this.blog.content, 'userid': 1 })
                .then((data) => {
                    this.submmited = true
                    console.log(data);
                }).catch((error) => {
                    console.log(error);
                })
        }
    }
}
</script>

<style scoped>
* {
    box-sizing: border-box;
}

#add-blog {
    margin: 20px auto;
    max-width: 600px;
    padding: 20px;
}
label{
    display: block;
    margin: 20px 0 10px;
}
input[type="text"],textarea,select{
    display: block;
    width: 100%;
    padding: 8px;
    box-sizing: border-box;
}
textarea{
    height: 200px;
}
#checkboxs label{
    display: inline-block;
    margin-top: 0;
}
#checkboxs input{
    display: inline-block;
    margin-right: 10px;
}
button{
    display: block;
    margin: 20px 0;
    background: #469eff;
    color: #fff;
    padding: 14px;
    border-radius: 4px;
    font-size: 18px;
    cursor: pointer;
}
#peiview{
    padding: 10px 20px;
    border: 1px dotted #ccc;
    margin: 30px 0;
}
h3{
    margin-top: 10px;
}
</style>